<template>
  <div class="app-container">
    <div class="modal-dialog" style="margin-top: 10%;">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title text-center" id="myModalLabel">注册</h4>
        </div>
        <div class="modal-body" id="model-body">
          <div class="form-group">
            <input
              v-validate="'required'"
              name="name"
              type="name"
              class="form-control"
              id="InputUserName"
              placeholder="请输入用户名"
              v-model="userName"
            />
            <span v-show="errors.has('name')" class="error">
              {{ errors.first("name") }}
            </span>
          </div>
          <div class="form-group">
            <input
              v-validate="'required|min:6'"
              name="password"
              type="password"
              class="form-control"
              id="InputUserPwd"
              placeholder="请输入密码"
              v-model="userPwd"
            />
            <span v-show="errors.has('password')" class="error">
              {{ errors.first("password") }}
            </span>
          </div>
          <div class="form-group">
            <input
              v-validate="'required'"
              name="age"
              type="age"
              class="form-control"
              id="InputUserAge"
              placeholder="请输入年龄"
              v-model="userAge"
            />
            <span v-show="errors.has('age')" class="error">
              {{ errors.first("age") }}
            </span>
          </div>
        </div>
        <div class="modal-footer">
          <div class="form-group">
            <button
              type="button"
              size="large"
              class="btn btn-primary form-control"
              @click="register"
            >
              注册
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import { Validator } from 'vee-validate'

/* 自定义规则
  Validator.extend('required55', {
  messages: {
    zh_CN: field => '输入不能为空'
  },
  validate: value => {
    // 获取输入的value
    return /^[1-9][0-9]{4,14}$/.test(value)
  }
}) */

const dictionary = {
  zh_CN: {
    // 自定义提示信息
    messages: {
      required: field => ' ' + field + '不能为空', // 输入为空时提示
      min: field => ' ' + field + '至少为6位'
    },
    // 设置提示名词
    attributes: {
      name: '用户名',
      password: '密码',
      age: '年龄'
    }
  }
}
Validator.localize(dictionary)
export default {
  name: 'register',
  data () {
    return {
      userName: '',
      userPwd: '',
      userAge: ''
    }
  },
  methods: {
    register () {
      axios
        .post('/api/register', {
          uanme: this.userName,
          pwd: this.userPwd,
          age: this.userAge
        })
        .then(result => {
          if (result.status === 200) {
            this.$toast('注册成功！')
          } else {
            this.$toast('注册失败！')
          }
          console.log(result)
        })
        .catch(err => {
          console.log(err)
        })
    }
  },
  components: {}
}
</script>

<style>
.error {
  font-size: 12px;
  color: #ff1c13;
}
</style>
